<template>
  <div class="activity-management">
    <!-- 操作按钮 -->
    <el-button type="primary" icon="el-icon-plus" @click="openAddDialog">新增活动</el-button>

    <!-- 活动信息表格 -->
    <el-table :data="paginatedActivities" style="width: 100%" stripe>
      <el-table-column label="活动名称" prop="activity_name" width="200" />
      <el-table-column label="活动内容" prop="activity_content" width="300" />
      <el-table-column label="活动图片" prop="activity_image" width="200">
        <template #default="scope">
          <img :src="scope.row.activity_image" alt="活动图片" style="width: 60px; height: 60px;" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteActivity(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控制和每页条数选择 -->
    <div class="pagination-wrapper">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="activities.length"
          layout="total, prev, pager, next, jumper"
          @current-change="handlePageChange"
          class="pagination"
      />
      <el-select v-model="pageSize" class="page-size-select" @change="handlePageSizeChange" placeholder="每页显示条数">
        <el-option label="3条" :value="3"></el-option>
        <el-option label="5条" :value="5"></el-option>
        <el-option label="10条" :value="10"></el-option>
        <el-option label="20条" :value="20"></el-option>
      </el-select>
    </div>

    <!-- 新增/编辑活动弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="currentActivity" :rules="rules" ref="activityForm" label-width="100px">
        <el-form-item label="活动名称" prop="activity_name">
          <el-input v-model="currentActivity.activity_name" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="活动内容" prop="activity_content">
          <el-input type="textarea" v-model="currentActivity.activity_content" placeholder="请输入活动内容" rows="6" />
        </el-form-item>
        <el-form-item label="活动图片" prop="activity_image">
          <el-input v-model="currentActivity.activity_image" placeholder="请输入活动图片链接" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveActivity">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activities: [
        { id: 1, activity_name: '台球比赛', activity_content: '这是一场激烈的台球比赛，邀请各路高手参加...', activity_image: 'https://www.example.com/activity1.png' },
        { id: 2, activity_name: '会员优惠活动', activity_content: '加入会员可享受免费练球等各种优惠...', activity_image: 'https://www.example.com/activity2.png' },
        { id: 3, activity_name: '新年聚会', activity_content: '台球厅举办的新年聚会活动，抽奖等精彩活动...', activity_image: 'https://www.example.com/activity3.png' }
      ],
      currentActivity: {
        id: null,
        activity_name: '',
        activity_content: '',
        activity_image: ''
      },
      dialogVisible: false,
      dialogTitle: '新增活动',
      currentPage: 1, // 当前页
      pageSize: 3,    // 每页显示的数据条数
      rules: {
        activity_name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        activity_content: [{ required: true, message: '请输入活动内容', trigger: 'blur' }],
        activity_image: [{ required: true, message: '请输入活动图片链接', trigger: 'blur' }]
      }
    };
  },
  computed: {
    // 根据分页数据计算当前页的数据
    paginatedActivities() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.activities.slice(start, end);
    }
  },
  methods: {
    openAddDialog() {
      this.currentActivity = { id: null, activity_name: '', activity_content: '', activity_image: '' };
      this.dialogTitle = '新增活动';
      this.dialogVisible = true;
    },
    openEditDialog(activity) {
      this.currentActivity = { ...activity };
      this.dialogTitle = '编辑活动';
      this.dialogVisible = true;
    },
    saveActivity() {
      this.$refs.activityForm.validate((valid) => {
        if (valid) {
          if (this.currentActivity.id) {
            const index = this.activities.findIndex(activity => activity.id === this.currentActivity.id);
            this.$set(this.activities, index, this.currentActivity);
          } else {
            this.currentActivity.id = this.activities.length + 1;
            this.activities.push(this.currentActivity);
          }
          this.dialogVisible = false;
          this.$message.success(`${this.dialogTitle === '新增活动' ? '新增' : '编辑'}成功`);
        }
      });
    },
    deleteActivity(activity) {
      this.$confirm('确认删除该活动吗?', '删除活动', { type: 'warning' }).then(() => {
        this.activities = this.activities.filter(item => item.id !== activity.id);
        this.$message.success('删除成功');
      }).catch(() => {});
    },

    // 切换当前页
    handlePageChange(page) {
      this.currentPage = page;
    },

    // 切换每页显示的条数
    handlePageSizeChange(size) {
      this.pageSize = size;
    }
  }
};
</script>

<style scoped>
.activity-management {
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}

.el-table .cell img {
  width: 60px;
  height: 60px;
}

.el-input[type="textarea"] {
  resize: none;
}

.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.page-size-select {
  margin-left: 10px;
  width: 150px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
